<template>
  <el-card>
    <el-form>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form-item label="姓名">
            <el-input placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单号">
            <el-input placeholder="请输入订单号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :max-height="tableHeight - 32" :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="200" align="center" />
      <el-table-column prop="name" label="手机号" width="240" align="center" />
      <el-table-column prop="name" label="订单号" align="center" />
      <el-table-column prop="name" label="创建时间" width="200" align="center" />
      <el-table-column prop="name" label="支付状态" width="200" align="center" />
    </el-table>
    <Pagination :total="total" @pageChange="pageChange" />
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getOrders } from '@/api'
import Pagination from '@/components/Pagination.vue'
import { useGlobalStore } from '@/stores'
const { tableHeight } = useGlobalStore()

const tableData = ref([{ name: '11' }])
const total = ref<number>(0)
const pageChange = (data: { page: number; size: number }) => {
  //   Object.assign(form.value, data)
  //   getTableData()
}

const getTableData = async () => {
  const { data } = await getOrders()
  console.log(data)
}

getTableData()
</script>
